<template>
	<el-scrollbar :height="isTagsview ? `calc(100vh - 154px)` : `calc(100vh - 120px)`">
		<div>
			<zh-form ref="formRef" style="width: 96%" :md="12" :lg="12" :xl="12" :model="form" :rules="rules" label-width="150px">
				<zh-form-input label="菜单ID" :disabled="true" prop="menuId" v-model="form.menuId"></zh-form-input>
				<zh-form-input label="菜单标题" prop="title" v-model="form.title"></zh-form-input>
				<zh-form-item label="图标" prop="icon">
					<IconSelector placeholder="请输入菜单图标" v-model="form.icon" type="all" />
				</zh-form-item>
				<zh-form-input label="图标图片url" prop="iconImgUrl" v-model="form.iconImgUrl"></zh-form-input>
				<zh-form-color-picker prop="color" label="图标颜色" placeholder="请选择" v-model="form.color"></zh-form-color-picker>
				<zh-form-select label="支持设备类型" prop="deviceType" v-model="form.deviceType" :options="dictData.deviceType"></zh-form-select>
				<zh-form-color-picker prop="bgColor" label="背景颜色" placeholder="请选择" v-model="form.bgColor"></zh-form-color-picker>
				<zh-form-input label="背景图片url" prop="bgUrl" v-model="form.bgUrl"></zh-form-input>
				<zh-form-input label="上级菜单ID" :disabled="true" prop="parentId" v-model="form.parentId"></zh-form-input>
				<zh-form-input label="上级菜单名称" :disabled="true" prop="parentTitle" v-model="form.parentTitle"></zh-form-input>
				<zh-form-select label="节点类型" prop="nodeType" v-model="form.nodeType" :options="dictData.nodeType"></zh-form-select>
				<zh-form-select
					label="菜单类型"
					placeholder="请选择路由来源"
					prop="menuType"
					v-model="form.menuType"
					:options="dictData.menuType"
				></zh-form-select>
				<zh-form-select label="菜单属性" prop="menuPro" v-model="form.menuPro" :options="dictData.menuPro"></zh-form-select>
				<zh-form-select
					label="有效状态"
					placeholder="有效状态"
					prop="menuStatus"
					v-model="form.menuStatus"
					:options="dictData.VALIDSTATUS"
				></zh-form-select>
				<zh-form-select
					label="操作期"
					placeholder="请选择业务期"
					prop="operating"
					v-model="form.operating"
					:options="dictData.operating"
				></zh-form-select>
				<zh-form-choose-org prop="orgId" label="所属组织" v-model="form.orgId"></zh-form-choose-org>
				<zh-form-cascader
					prop="areaCode"
					label="行政区划"
					placeholder="请选择"
					:props="{ checkStrictly: true, emitPath: false }"
					v-model="form.areaCode"
					:options="areaCodeSelectTreeData"
				></zh-form-cascader>
				<zh-form-select
					prop="appId"
					:lazy="true"
					label="所属应用"
					:disabled="true"
					v-model="form.appId"
					:fieldNames="{ label: 'appName', value: 'appId' }"
					funcCode="application0012"
					searchField="appName"
				></zh-form-select>
				
                <zh-form-number label="排序" :disabled="true" placeholder="拖拽节点自动排序" prop="orderNo" v-model="form.orderNo"></zh-form-number>
				<zh-form-input label="所属服务事项编码" prop="serviceCode" v-model="form.serviceCode"></zh-form-input>
				<zh-form-input label="所属服务事项名称" prop="serviceName" v-model="form.serviceName"></zh-form-input>
                <zh-form-select
					label="链接类型"
					placeholder="请选择路由来源"
					prop="linkType"
					v-model="form.linkType"
					:options="dictData.linkType"
				></zh-form-select>

				<zh-form-input
					label="路由名称"
					prop="linkName"
					v-model="form.linkName"
					v-if="form.linkType === 'router'"
					placeholder="需和前端定义的名称一致"
				></zh-form-input>
				<zh-form-input :span="24" label="内部路由路径" prop="linkPath" v-model="form.linkPath" v-if="form.linkType === 'router'"></zh-form-input>
				
				<zh-form-input :span="24" label="链接地址" prop="linkUrl" v-model="form.linkUrl" v-if="form.linkType != 'router'"></zh-form-input>

				<zh-form-radio :sm="12" :lg="8" :xl="8" label="是否标签显示" prop="labelFlag" v-model="form.labelFlag" :options="dictFlag"></zh-form-radio>
				<zh-form-radio :sm="12" :lg="8" :xl="8" label="是否携带token" prop="tokenFlag" v-model="form.tokenFlag" :options="dictFlag"></zh-form-radio>
				<zh-form-radio :sm="12" :lg="8" :xl="8" label="是否优先显示" prop="firstShow" v-model="form.firstShow" :options="dictFlag"></zh-form-radio>
				<zh-form-radio :sm="12" :lg="8" :xl="8" label="是否公共" prop="publicFlag" v-model="form.publicFlag" :options="dictFlag"></zh-form-radio>
				<zh-form-radio :sm="12" :lg="8" :xl="8" label="是否禁用" prop="disabled" v-model="form.disabled" :options="dictFlag"></zh-form-radio>
				<zh-form-input
					type="textarea"
					:span="24"
					label="链接参数"
					prop="param1"
					v-model="form.param1"
					placeholder="请用输入json格式的参数"
				></zh-form-input>
				<zh-form-input
					type="textarea"
					:span="24"
					label="自定义参数2"
					prop="param2"
					v-model="form.param2"
					placeholder="请用输入自定义参数"
				></zh-form-input>
				<zh-form-input
					type="textarea"
					:span="24"
					label="自定义参数3"
					prop="param3"
					v-model="form.param3"
					placeholder="请用输入自定义参数"
				></zh-form-input>
				<zh-form-input
					type="textarea"
					:span="24"
					label="自定义参数4"
					prop="param4"
					v-model="form.param4"
					placeholder="请用输入自定义参数"
				></zh-form-input>
			</zh-form>
		</div>
	</el-scrollbar>
</template>
<script lang="ts" setup name="appmenuInfo">
const formRef = ref();
const { isTagsview } = storeToRefs($store.theme);
//----------------定义接收参数-------------------------------
const prop = defineProps({
	appmenuInfo: Object,
});
let initForm = {
	menuId: '',
	routerId: '',
	routerKey: '',
	linkName: '',
	title: '',
	parentId: '',
	parentTitle: '',
	icon: '',
	redirect: '',
	otherUrl: '',
	nodeType: '1',
	component: '',
	isLink: '0',
	isIframe: '0',
	keepAlive: '1',
	hidden: '0',
	hideChildrenInMenu: '0',
	hiddenBreadcrumb: '0',
	hiddenHeaderContent: '0',
	publicFlag: '0',
	disabled: '0',
	rollbackFlag: '0',
	logFlag: '1',
	auditFlag: '0',
	param1: '',
	param2: '',
	param3: '',
	param4: '',
	digest: '',
	remarks: '',
	operating: '',
	orderNo: undefined,
	rate: undefined,
	appId: '',
	orgId: '',
	sourceType: '1',
	linkType: 'router',
	linkUrl: '',
	menuType: '',
	menuStatus: '',
	serviceCode: '',
};
let form = reactive({
	routerId: '',
	routerKey: '',
	linkName: '',
	title: '',
	parentId: '',
	parentTitle: '',
	icon: '',
	redirect: '',
	otherUrl: '',
	nodeType: '1',
	component: '',
	isLink: '0',
	isIframe: '0',
	keepAlive: '0',
	hidden: '0',
	hideChildrenInMenu: '0',
	hiddenBreadcrumb: '0',
	hiddenHeaderContent: '0',
	publicFlag: '0',
	disabled: '0',
	rollbackFlag: '0',
	logFlag: '1',
	auditFlag: '0',
	param1: '',
	param2: '',
	param3: '',
	param4: '',
	digest: '',
	remarks: '',
	operating: '',
	orderNo: undefined,
	rate: undefined,
	appId: '',
	orgId: '',
	sourceType: '1',
	linkType: 'router',
	linkUrl: '',
	menuType: '',
	menuStatus: '',
	serviceCode: '',
});
const areaCodeSelectTreeData = ref([]);
const dictFlag = ref([
	{ dictKey: '1', dictValue: '是' },
	{ dictKey: '0', dictValue: '否' },
]);
const dictKeepAlive = ref([
	{ dictKey: '1', dictValue: '缓存' },
	{ dictKey: '0', dictValue: '不缓存' },
]);
const rules = reactive({
	routerKey: [{ required: true, message: '路由标识不能为空', trigger: 'blur' }],
	linkName: [{ required: true, message: '路由名称不能为空', trigger: 'blur' }],
	title: [{ required: true, message: '菜单标题不能为空', trigger: 'blur' }],
	nodeType: [{ required: true, message: '节点类型不能为空', trigger: 'blur' }],
});
const disabledParams = reactive({
	otherUrl: true,
	isLink: false,
	isIframe: false,
});
//获取数据字典
const dictParams = {
	dictFields: 'nodeType,operating,linkType,menuType,VALIDSTATUS,flag,publicFlag,menuPro,deviceType',
};
const dictData = ref({ nodeType: [], operating: [] });
$api.common.getBatchDict.post(dictParams).then((res: any) => {
	dictData.value = res.result;
});
const isLinkChange = (value) => {
	//是否外链触发事件
	if (value === '1') {
		disabledParams.otherUrl = false;
	} else {
		disabledParams.otherUrl = true;
	}
};
const isIframeChange = (value) => {
	//是否内嵌触发事件
	if (value === '1') {
		disabledParams.otherUrl = false;
		disabledParams.isLink = true;
		form.isLink = '1';
	} else {
		disabledParams.otherUrl = true;
		disabledParams.isLink = false;
		form.isLink = '0';
	}
};
const selectRouter = ref({});
//初始化
onMounted(() => {
	let menuId = prop.appmenuInfo?.menuId;
	console.log('menuId', menuId);
    getAreaCodeData();
	if (menuId) {
		//查询路由信息
		getRouterInfo(menuId);
	}
});
watch(
	() => prop.appmenuInfo,
	(appmenuInfo: any) => {
		if (appmenuInfo.menuId) {
			getRouterInfo(appmenuInfo.menuId);
		} else {
			let myForm = Object.assign(initForm, appmenuInfo);
			form = Object.assign(form, myForm);
		}
	},
	{
		deep: true,
	}
);
function getAreaCodeData() {
	setTimeout(() => {
		$api.common.send.post('dict0026', {}).then((res) => {
			areaCodeSelectTreeData.value = res.result;
		});
	}, 20);
}
const getRouterInfo = (menuId) => {
	const routerParams = { menuId: menuId };
	$api.common.send.post('appmenu0002', routerParams).then((res) => {
		form = Object.assign(form, res.result || {});
		selectRouter.value = res.result || {};
		if (form.isLink === '1') {
			disabledParams.otherUrl = false;
		} else {
			disabledParams.otherUrl = true;
		}
		if (form.isIframe === '1') {
			disabledParams.otherUrl = false;
			disabledParams.isLink = true;
			form.isLink = '1';
		} else {
			disabledParams.otherUrl = true;
			disabledParams.isLink = false;
			form.isLink = '0';
		}
	});
};

//保存数据
const saveForm = async () => {
	//校验表单
	let checkFlag = await formRef.value.checkForm();
	if (checkFlag) {
		//校验通过

		let saveForm = Object.assign({}, form);
		if (saveForm.isIframe === '1') {
			saveForm.nodeType = 'iframe';
		} else {
			if (saveForm.isLink === '1') {
				saveForm.nodeType = 'link';
			}
		}

		if (!saveForm.menuId) {
			let res = await $api.common.send.post('appmenu0004', saveForm);
			res.saveType = 'add';
			return res;
		} else {
			let res = await $api.common.send.post('appmenu0005', saveForm);
			res.saveType = 'edit';
			return res;
		}
	}
	return null;
};
//重置表单
const resetForm = async () => {
	await formRef.value?.resetFields();
};
defineExpose({ saveForm, resetForm, form, selectRouter, getRouterInfo });
</script>
<style lang="scss" scoped></style>
